<template>
  <!-- 问题分类选择 -->
  <a-select v-bind="$attrs" v-on="$listeners" :placeholder="placeholder" v-model="currentValue" allowClear>
    <a-spin v-if="fetching" slot="notFoundContent" size="small" />
    <a-select-option v-else v-for="i in list" :key="i.id" :value="i.id">{{ i.problemType }}</a-select-option>
  </a-select>
</template>
<script>
import { problemType } from '@/api/quality/quality' // 问题维护api

export default {
  name: 'SelectProblemType',
  inheritAttrs: false,
  props: {
    // v-model绑定的数据
    value: {
      type: [Array, String]
    },
    // 需要联动的表单名，
    form: {
      type: Object,
      default: function () {
        return {}
      }
    },
    // 需要联动的表单名
    keyValue: {
      type: String,
      default: function () {
        return 'subItemId'
      }
    },
    // 联动表单值改变时是否清空当前表单值
    isClear: {
      type: Boolean,
      default() {
        return true
      }
    },
    //如果是编辑，第一次不要重置绑定的值。。。。
    isEdit: {
      type: Boolean,
      default: () => false
    },
    // placeholder
    placeholder: {
      type: String,
      default: function () {
        return '请选择'
      }
    }
  },
  data() {
    return {
      fetching: false,
      list: []
    }
  },
  mounted() {
    let val = this.attr
    val && this.getList({ subItemId: val })
  },
  methods: {
    getList(params) {
      this.fetching = true
      problemType
        .getList(params)
        .then((res) => {
          this.fetching = false
          if (res.code === 200) {
            this.list = res.data
          } else {
            this.$message.error('err:', res.message)
          }
        })
        .catch((res) => {
          this.fetching = false
        })
    }
  },
  computed: {
    // 需要联动的表单值
    attr() {
      return this.form[this.keyValue]
    },
    // 转换绑定的选中数据，与v-model同步
    currentValue: {
      get: function () {
        return this.value
      },
      set: function (value) {
        this.$emit('input', value)
      }
    }
  },
  watch: {
    // 监听联动表单值重置项目列表
    attr(val) {
      // 清空表单
      if (this.isClear && !this.isEdit) {
        this.currentValue = void 0
        this.$emit('resetSelf') // 在搜索组件(SearchData)中重置自身的值
      }
      // 清空表单
      if (this.isEdit && this.isCanClear) {
        this.currentValue = void 0
        this.$emit('resetSelf') // 在搜索组件(SearchData)中重置自身的值
      } else {
        this.isCanClear = true
      }
      // 重置列表
      this.list = []
      // 重置列表
      val && this.getList({ subItemId: val })
    }
  }
}
</script>
